<script setup>
import axios from "axios";
import { reactive } from "vue";
import "../mock/mock.js"; // 引入 mock 数据
import Foreword from "./components/foreword.vue";
import Catalogue from "./components/catalogue.vue";
import BasicInfo from "./components/basicInfo.vue";
import { onMounted } from "vue";

const data = reactive({
  forewordContent: [],
  org: "",
  year: 0,
  month: 0,
  day: 0,
  catalogueData: [],
  studentInfo: {},
  tuningAnalysisData: [],
  tuningDestinationData: [],
  stableLowerLimitData: [],
  recommendNameListData: [],
});

const fetchData = async () => {
  try {
    const response = await axios.get("/api/data");
    if (response.data.status === 200) {
      data.forewordContent = response.data.data.forewordContent;
      data.org = response.data.data.org;
      data.year = response.data.data.year;
      data.month = response.data.data.month;
      data.day = response.data.data.day;
      data.catalogueData = response.data.data.catalogueData;
      data.studentInfo = response.data.data.studentInfo;
      data.tuningAnalysisData = response.data.data.tuningAnalysisData;
      data.tuningDestinationData = response.data.data.tuningDestinationData;
      data.stableLowerLimitData = response.data.data.stableLowerLimitData;
      data.recommendNameListData = response.data.data.recommendNameListData;
    }
  } catch (error) {
    console.error("请求失败:", error);
  }
};

onMounted(() => {
  fetchData();
});
</script>
<template>
  <!-- <div class="content">
    <div class="header">
      <img src="../img/header.png" alt="" />
    </div>
    <div class="main-content page">
      <Foreword />
      <Catalogue />
      <BasicInfo />
    </div>
    <div class="footer">
      <img src="../img/footer.png" alt="" />
    </div>
  </div> -->
  <div class="page">
    <!-- <div class="pageing">
      <img src="../img/firstCover.png" alt="" />
    </div> -->
    <Foreword :data="data" />
    <Catalogue :data="data" />
    <BasicInfo :data="data" />
    <!-- <div class="pageing">
      <img src="../img/lastCover.png" alt="" />
    </div> -->
  </div>
</template>

<style scoped>
.page {
  width: 1000px;
  margin: 0 auto;
  font-size: 20px;
  margin-bottom: 100px;
  line-height: 2.3;
  padding: 0 16px;

  img {
    width: 100%;
  }
}

/* .footer,
.header {
  text-align: center;
  img {
    width: 1000px;
  }
} */

/* @media print {
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  .content {
    page-break-before: always;
  }

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    font-size: 24px;
    background: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;
    z-index: 10; 
    background-image: url("../img/header.png"); 
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    background: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;
    z-index: 10; 
    background-image: url("../img/header.png"); 
  }

  .main-content {
    margin-top: 80px;
    margin-bottom: 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@page {
  margin-top: 80px;
  margin-bottom: 80px;
} */

/* body {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
} */

@media print {
  @page {
    size: A4;
    margin: 40px 0;
  }

  body {
    margin: 0;
  }

  .pageing + .pageing {
    page-break-before: always;
  }
}
</style>
